<template>
  <div class="order-list">
    <h2>我的订单</h2>
    
    <div class="tabs">
      <span 
        v-for="tab in tabs" 
        :key="tab.value"
        :class="{ active: currentTab === tab.value }"
        @click="switchTab(tab.value)"
      >
        {{ tab.label }}
      </span>
    </div>

    <div class="orders" v-if="!loading">
      <div 
        v-for="order in orders" 
        :key="order.id" 
        class="order-card"
      >
        <div class="order-header">
          <span class="order-no">订单号：{{ order.orderNo }}</span>
          <span :class="['status', order.status]">{{ getStatusText(order.status) }}</span>
        </div>
        
        <div class="movie-info">
          <img :src="order.movie.poster" :alt="order.movie.name">
          <div class="details">
            <h3>{{ order.movie.name }}</h3>
            <p>场次：{{ order.showtime }}</p>
            <p>座位：{{ order.seats.join('、') }}</p>
            <p>总价：¥{{ order.totalPrice }}</p>
          </div>
        </div>

        <div class="order-footer">
          <span class="time">{{ order.createTime }}</span>
          <div class="actions">
            <button 
              v-if="order.status === 'unpaid'"
              @click="goPay(order.id)"
            >去支付</button>
            <button 
              v-if="order.status === 'paid'"
              @click="showQrCode(order.id)"
            >查看取票码</button>
            <button 
              v-if="order.status === 'completed'"
              @click="goRate(order.movieId)"
            >去评价</button>
          </div>
        </div>
      </div>

      <div v-if="!orders.length" class="empty">
        暂无订单
      </div>
    </div>

    <div v-else class="loading">
      加载中...
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const loading = ref(false)
const currentTab = ref('all')
const orders = ref([])
const tabs = ref([
  { label: '全部', value: 'all' },
  { label: '待付款', value: 'unpaid' },
  { label: '待使用', value: 'paid' },
  { label: '已完成', value: 'completed' }
])

const fetchOrders = async () => {
  loading.value = true
  try {
    const response = await userApi.getOrders(currentTab.value)
    orders.value = response.data
  } catch (error) {
    console.error('获取订单列表失败:', error)
    ElMessage.error('获取订单失败')
  } finally {
    loading.value = false
  }
}

const switchTab = (tab) => {
  currentTab.value = tab
  fetchOrders()
}

const getStatusText = (status) => {
  const statusMap = {
    unpaid: '待付款',
    paid: '待使用',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || status
}

const goPay = (orderId) => {
  router.push(`/payment/${orderId}`)
}

const showQrCode = (orderId) => {
  // 实现显示取票二维码的逻辑
}

const goRate = (movieId) => {
  router.push(`/movie/${movieId}`)
}

onMounted(() => {
  fetchOrders()
})
</script>

<style scoped>
.order-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.tabs span {
  padding: 10px 0;
  cursor: pointer;
}

.tabs span.active {
  color: #ff5f16;
  border-bottom: 2px solid #ff5f16;
}

.order-card {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.status {
  font-weight: bold;
}

.status.unpaid { color: #ff5f16; }
.status.paid { color: #2db7f5; }
.status.completed { color: #87d068; }
.status.cancelled { color: #999; }

.movie-info {
  display: flex;
  gap: 15px;
}

.movie-info img {
  width: 120px;
  height: 160px;
  object-fit: cover;
  border-radius: 4px;
}

.details h3 {
  margin: 0 0 10px 0;
}

.details p {
  margin: 5px 0;
  color: #666;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.time {
  color: #999;
}

.actions button {
  padding: 6px 15px;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  margin-left: 10px;
}

.actions button:first-child {
  background: #ff5f16;
  color: white;
}

.empty, .loading {
  text-align: center;
  padding: 40px;
  color: #999;
}

@media (max-width: 768px) {
  .movie-info img {
    width: 90px;
    height: 120px;
  }
  
  .details h3 {
    font-size: 16px;
  }
  
  .details p {
    font-size: 14px;
  }
}
</style> 